<template>
  <div class="footer">
    <div class="ft-body">
      <div class="ft-lf">
        <div class="left_imgbox">
          <div class="social-link">
            <router-link
              class="foot-logo p-rel"
              to='/'
            >
              <img  :src="logo"  alt="logo" class="foot_logo"  >
              <p>CopyRight&nbsp; © 2019&nbsp;</p>
            </router-link>
          </div>
          <div class="foot_copy">
            <ul class="flex foot_icon">
              <li><i class="iconfont icon-facebook"></i></li>
              <li><i class="iconfont icon-twitter"></i></li>
              <li><i class="iconfont icon-medium"></i></li>
              <li><i class="iconfont icon-youtubeplay"></i></li>
              <li><i class="iconfont icon-061coineuro"></i></li>
              <li><i class="iconfont icon-web__bitebi"></i></li>
              <li><i class="iconfont icon-instagram"></i></li>
              <li><i class="iconfont icon-weibo"></i></li>
            </ul>
            <p class="font-14">开启您的数字资产交易之旅！</p>
          </div>
        </div>
      </div>
      <div class="ft-rt">
        <dl
          v-for="(item,i) in footerNavList"
          :key='i'
          class="ft-nav"
        >
          <dt v-text="$t(item.i18nKey)||item.title"></dt>
          <dd
            v-for="(itemIn,j) in item.items"
            :key='j'
          >
            <router-link 
              v-if="itemIn.label=='关于公司'"
              target="view_window"
              :to="itemIn.link"
              v-text="$t(itemIn.i18nKey)||itemIn.label"
            >
            </router-link>
            <router-link
              v-else
              :to='itemIn.link'
              v-text="$t(itemIn.i18nKey)||itemIn.label"
            >
            </router-link>
          </dd>
        </dl>
        <!-- <div class="qr-code">
          <vue-qr
            v-if="qrcode"
            :text="qrcode"
            :margin="10"
            :size="150"
          >
          </vue-qr>
          <span v-text="$t('appDownLoad')||'扫码下载App'"></span>
        </div> -->
      </div>
    </div>
    <!-- <div class="copytxt">
      <p>CopyRight&nbsp; © 2019&nbsp;<em v-text="$t('copyRight')"></em></p>
    </div> -->
  </div>
</template>
<script>
import VueQr from "vue-qr";
export default {
  name: "my-footer",
  components: { VueQr },
  data() {
    return {
      //尾部的导航，配合国际化中英文切换的操作
      footerNavList: [
        {
          i18nKey: "ptxt110",
          title: "条款说明",
          items: [
            {
              i18nKey: "legalStatement",
              label: "法律声明",
              link: "/help_center/law"
            },
            {
              i18nKey: "privacy",
              label: "隐私条款",
              link: "/help_center/privacy"
            },
            {
              i18nKey: "riskStament",
              label: "风险披露声明",
              link: "/help_center/risk"
            },
            {
              i18nKey: "anouncement",
              label: "系统公告",
              link: "/help_center/h_home"
            },
          ]
        },
        {
          i18nKey: "helpCenter",
          title: "帮助中心",
          items: [
            {
              i18nKey: "listing",
              label: "上币申请",
              link: "/upcoinInfo"
            },
            {
              i18nKey: "faqCenter",
              label: "常见问题",
              link: "/help_center/h_home"
            },
            {
              i18nKey: "ptxt118",
              label: "法币广告权限申请",
              link: "/FrTrade/business"
            },
            
          ]
        },
        {
          i18nKey: "aboutUs",
          title: "关于我们",
          items: [
            
            {
              i18nKey: "agreement",
              label: "用户协议",
              link: "/help_center/contact"
            },
            {
              i18nKey: "aboutCompany",
              label: "关于公司",
              link: "/help_center/about"
            },
          ]
        },
      ],
      logo: require("@/assets/images/logo/logo.png"),
      qrcode: "https://www.xxxxx.com/app/index.html",
      // 下载链接
    };
  },
  computed: {
    copyRight() {
      let year = new Date().getFullYear();
      return `${year - 1}-${year}`;
    }
  },
  mounted() {
    if (this.qrcode) return false;
    this.$bus.on("qrCodeLoad", url => {
      url && (this.qrcode = url);
    });
  }
};
</script>
<style lang="scss" scoped>
$footer-font-color: #fff;
.footer {
  margin-top: 0px;
  box-sizing: border-box;
  background: $bg-foot;
  width: 100%;
  padding: 50px 0;
  .ft-body {
    min-width: 1200px;
    overflow: hidden;
    width: 70%;
    padding: 40px 0 40px 0;
    @include hCenter;
    display: flex;
  }
  .ft-nav {
    @include float;
    margin-left: 96px;
    &:first-child {
      margin-left: 0;
    }
    dt {
      font-weight: 600;
      margin-bottom: 25px;
      font-size: 15px;
      color:$txt-fff;
    }
    dd {
      font-size: 14px;
      color: $footdd;
      @include textVcenter(26px);
      &:hover {
        color: $txt-footgold;
      }
    }
  }
  .ft-rt {
    color: #666;
    // margin-left: 45%;
    ul {
      width: 68%;
      float: left;
    }
    li {
      margin-top: 15px;
      &:first-child {
        margin-top: 0;
        color: $footer-font-color;
      }
    }
    .warning {
      font-size: 13px;
      @include float;
      line-height: 1.8;
      text-align: justify;
    }
    .qr-code {
      margin-left: 75%;
      text-align: center;
      font-size: $font-default;
      img {
        display: block;
        margin: 12px auto;
        width: 150px;
        height: 150px;
      }
    }
  }
  .social-link {
    a {
      display: inline-block;
      margin-left: 10%;
      transition: all 0.3s;
      &:first-child {
        margin-left: 0;
      }
      &:hover {
        color: $main-bg-color;
      }
    }
    .ml-0 {
      margin-left: 0;
    }
    .iconfont {
      font-size: $font-ex-large !important;
    }
    p{color: #6a707f;line-height: 30px;}
  }
  .foot_logo{margin-left: 0px;}
  .foot_copy{
    line-height: 40px;color: $txt-fff;margin-top: 25px;
  }
}
.copytxt{
  padding-bottom: 20px;
  p{text-align: center;color: #B7C5DB;font-size: 14px;}
}
.foot_icon{
  li{
    margin-right: 15px;cursor: pointer;
    i{font-size: 18px;}
    &:hover{color: #357ce1;}
  }
}
@media (min-width: 1441px){
  .ft-rt {
    color: #666;
    margin-left: 45%;
  }  
}
@media (max-width: 1440px){
  .ft-rt {
    color: #666;
    margin-left: 40%;
  }  
}
</style>